<template>
  <div class="reset-password-mod">
    <Card>
      <p slot="title">
        <Icon type="ios-help-outline" size=16 class="info-icon"></Icon>根据账号名找回密码</p>
      <Form :model="formData" ref="mailForm" :label-width="80" :rules="rules">
        <FormItem label="登陆账号" prop="username">
          <Input v-model="formData.username" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem prop="code" class="vcodeform">
          <Input v-model="formData.code" size="large" placeholder="请输入验证码">
          <span slot="append">
            <img :src="'/api/code/'+formData.codeKey" @click="initVcode" style="height:30px">
          </span>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="postMail('tel')" :loading="posting" >手机找回</Button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <!--<Button type="primary" @click="postMail('mail')" :loading="posting" >邮箱找回</Button>-->
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
import { ajax_get_send_mail_by_username } from '../../api/base_sys/user'
export default {
  name: 'hasCode',
  data () {
    return {
      posting: false,
      formData: {
        username: '',
        codeKey: '',
        code: '',
        type: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    initVcode () {
      let rnd = Math.random().toString() + (new Date()).getTime()
      this.formData.codeKey = rnd
    },
    // 提交密码数据
    postMail (type) {
      const self = this
      this.formData.type = type
      this.$refs.mailForm.validate(valid => {
        if (valid) {
          this.posting = true
          ajax_get_send_mail_by_username(this.formData).then(res => {
            this.posting = false
            if (res.code == 0) {
              this.$router.push({ name: 'resetPwd', params: { 'username': this.formData.username, 'type': this.formData.type } })
            } else {
              this.initVcode()
              // 正常发送邮件
              this.$Notice.error({
                title: '失败',
                desc: res.message,
                duration: 10
              })
            }
          })
        }
      })
    }
  },
  created () {
    document.body.setAttribute('class', '')
    this.initVcode()
  }
}
</script>
<style lang="less">
.info-icon {
  margin-right: 10px;
  color: #2781ee;
}

.reset-password-mod {
  width: 400px;
  height: 250px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -125px;
}
.vcodeform .ivu-input-group-large>.ivu-input-group-append {
padding:1px
}
</style>
